<template>

    <div class="editor">
        <div class="quill-editor-example">
            <input ref="file" @change="imageUpload" type="file" style="display: none" accept="image/*" >
            <!-- quill-editor -->
            <quill-editor ref="myQuillEditor" v-model="content"
                          :options="editorOption"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @ready="onEditorReady($event)"
                          @change="onEditorChange($event)"
            >
            </quill-editor>

        </div>
    </div>
</template>

<script>
    import Stick from '../../components/Stick'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import {getToken,domain} from '../../api/qiniu'
    import Qiniu from '../../utils/qiniu'
    // import hljs from 'highlight.js'
    import VueQuillEditor, {Quill, quillEditor} from 'vue-quill-editor'
    import {ImageDrop} from 'quill-image-drop-module'
    import ImageResize from 'quill-image-resize-module'

    Quill.register('modules/imageDrop', ImageDrop)
    Quill.register('modules/imageResize', ImageResize)

    export default {
        props:{
            initContent:{
                default:''
            }
        },
        components: {
            quillEditor
        },
        created(){
            this.$nextTick(()=>{
                this.content = this.initContent
            })
            getToken().then(res=>{
                this.token = res.data
            })
        },
        data() {
            return {
                token:null,
                addRange:null,
                content: '',
                editorOption: {
                    modules: {
                        toolbar: [
                            [{'size': ['small', false, 'large']}],
                            ['bold', 'italic'],
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            ['link', 'image']
                        ],
                        history: {
                            delay: 1000,
                            maxStack: 50,
                            userOnly: false
                        },
                        imageDrop: true,
                        imageResize: {
                            displayStyles: {
                                backgroundColor: 'black',
                                border: 'none',
                                color: 'white'
                            },
                            modules: ['Resize', 'DisplaySize', 'Toolbar']
                        }
                    }
                }
            }
        },
        mounted() {
            this.content = this.initContent+this.content
            // this.content = `<p><strong><em>Click on the Image Below to resize!</em></strong></p><br>` + this.content
            this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
        },
        computed: {
            // contentCode() {
            //     return hljs.highlightAuto(this.content).value
            // },
        },
        methods: {
            onEditorBlur(editor) {
                // console.log('editor blur!', editor)
            },
            onEditorFocus(editor) {
                // console.log('editor focus!', editor)
            },
            onEditorReady(editor) {
                // console.log('editor ready!', editor)
            },
            onEditorChange(editor){
                this.$emit('setContent', editor.html);
            },
            // 点击图片ICON触发事件
            imgHandler(state) {
                this.addRange = this.$refs.myQuillEditor.quill.getSelection()
                this.$refs.file.click()
                // if (state) {
                //     let fileInput = document.getElementById('imgInput')
                //     fileInput.click() // 加一个触发事件
                // }
                // this.uploadType = 'image'
            },
            imageUpload(e){
                let file = e.target.files[0]
                Qiniu.uploadImg(this.token,file,{
                    error:function (e) {
                        console.log(e)
                    },
                    next:function (e,k) {
                        console.log(e)
                    },
                    complete: (e) => {
                       let imgUrl = domain+e.key
                        this.$refs.myQuillEditor.quill.insertEmbed(this.addRange.index , "image", imgUrl, Quill.sources.USER)
                    }
                })
                // let reader = new FileReader();
                // reader.readAsDataURL(file);
                // reader.onload = function (e){
                //    let base64 =  e.currentTarget.result
                //
                // }
            }
        }
        // watch: {
        //     content(val) {
        //         this.$emit('setContent', val);
        //     }
        // }
    }
</script>

<style>
    .quill-editor:not(.bubble) .ql-container,
    .quill-editor:not(.bubble) .ql-container .ql-editor {
        height: 35rem;
        padding-bottom: 1rem;
    }
</style>


